<!-- Inspired by bootstrap http://getbootstrap.com/ -->
<template>
  <div :class="['tip',tipShow?'show':'']" :style="{width:width+'px',top:height/2 - 100 +'px'}" >
    <div :class="['tip-container',tipShow?'show':'hide']">
      <text :class="['tip-meaasge',tipShow?'show':'hide']">{{value}}</text>
    </div>
  </div>
</template>

<script>
  module.exports = {
    data: function(){
		 return {
      value:'',
      tipShow:''
		 }
    },
    created:function(){
      this.width = weex.config.env.deviceWidth;
      this.height = weex.config.env.deviceHeight;
    },
    methods: {
      handleClick (event) {
        this.$emit('click', event)
      }
    }
  }
</script>

<style>
  .tip{
    position: absolute;
    height: 120px;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    visibility: hidden;
  }
  .tip-container{
    height: 80px;
    background-color: rgba(102,102,102,1);
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-right: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    min-width:200px;
  }
  .tip-meaasge{
    color:#fff;
  }
  .show{
    visibility:visible;
  }
  .hide{
    visibility: hidden;
  }

</style>